import React from 'react'
import './Todolist.css'
import TodoHeader from '../TodoHeader/TodoHeader'
import TodoMain from '../TodoMain/TodoMain'
import TodoFoot from '../TodoFoot/TodoFoot'
import { useState } from 'react'
import { nanoid } from 'nanoid'
import request from '../../../utils/request'
import { useEffect } from 'react'

export default function Todolist() {
  let [todos,settodos] = useState([])
  // 声明数据格式
  let addTodo = async (title)=>{
    try{
      let result = await request.post('/todos',{title,done:false})
    settodos([
      ...todos,
      result.data
    ])
    }catch(e){
      alert('网络异常，请稍后重试')
    }
  }
  // 声明函数,定义选中
  let checkTodo = async (id,done)=>{
    await request.get(`/todos/${id}`,{
      done : done
    })
    let newTodos = todos.map(item => {
      if(item.id === id){
        item.done = done
      }
      return item
    })
    settodos(newTodos)
  }
  // 声明函数   删除事件
  let remoTodo = async (id)=>{
    await request.delete(`todos/${id}`)
    let newTodos = todos.filter(item=>{
      if(item.id === id){
        return false
      }
      return true
    })
    settodos(newTodos)
  }
  // 声明函数,定义全选
  let checkAllTodos = (done)=>{
    let newTodos = todos.map(item=>{
      item.done = done
      return item
    })
    settodos(newTodos)
  }
  // 声明函数,定义删除选中
  let removeTodos = ()=>{
    let newTodos = todos.filter(item=>!item.done)
    settodos(newTodos)
  }
  // 连接axios
  useEffect(()=>{
    let main = async ()=>{
      let result = await request.get('/todos')
      settodos(result.data)
    }
    main()
  },[])
  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <TodoHeader addTodo={addTodo}/>
      <TodoMain todos = {todos} checkTodo={checkTodo} remoTodo={remoTodo}/>
      <TodoFoot checkAllTodos={checkAllTodos} todos={todos} removeTodos={removeTodos}/>
    </div>
  </div>
  )
}
